<template>
    <div class="sign_in">
        <div class="take_out">
            <img src="@/assets/my/choujiang.png" alt="">
        </div>
        <ul class="record">
            <li v-for="(item, key) in recordList" :key="key">
                <span :class="key == 0 ? 'on' : ''">+{{item.val}}</span>
                <b>{{item.tit}}</b>
                <i></i>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'signIn',
    data() {
        return {
            recordList: [
                {
                    tit: '第一天',
                    val: 10
                },{
                    tit: '第二天',
                    val: 10
                },{
                    tit: '第三天',
                    val: 30
                },{
                    tit: '第四天',
                    val: 10
                },{
                    tit: '第五天',
                    val: 50
                },{
                    tit: '第六天',
                    val: 10
                },{
                    tit: '第七天',
                    val: 180
                },
            ]
        }
    }
}
</script>

<style lang="less" scoped>
    .sign_in{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        .take_out{
            position: absolute;
            width: 100%;
            .h(566);
            background: url('../../assets/my/signBg.png');
            background-size: 100%;
            img{
                width: 70%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .record{
            position: absolute;
            top:50%;
            width: 100%;
            display: flex;
            li{
                flex: 1;
                text-align: center;
                position: relative;
                span{
                    display: block;
                    .w(60);
                    .h(60);
                    border: 1px solid #189BEB;
                    .lh(60);
                    text-align: center;
                    margin: 0 auto;
                    border-radius: 50%;
                    color: #189BEB;
                }
                b{
                    display: block;
                    .lh(80);
                    color: #333;
                    font-weight: normal;
                }
                .on{
                    background: #189BEB;
                    color: #fff;
                }
                i{
                    .w(24);
                    .h(2);
                    background: #189BEB;
                    position: absolute;
                    top: 30px;
                    right: -10px;
                }
                &:last-child{
                    i{
                        display: none;
                    }
                }
            }
        }
    }
</style>
